<style>
    .floatThead-table {background-color: #FFFFFF;}
</style>

<div class="am-cf am-padding">
	<div class="am-fl am-cf">
		<form action="" method="GET">
		<span class="am-badge am-badge-danger">数据库:</span>
		<select name='db' id="db">
			{{range .mgoDbs}} <option value="{{.}}"  {{if eq . $.db}} selected="selected" {{end}} >{{.}}</option>{{end}}
 		</select>

		<span class="am-badge am-badge-danger">数据表:</span>
		<select name='col'>
			{{range .mgoCols}} <option value="{{.}}">{{.}}</option>{{end}}
 		</select>

		<button class="am-btn am-btn-sm am-btn-success" type="submit">查询</button>
		</form>
	</div>
</div>

<div class="am-g">
    <div class="am-u-sm-12 am-scrollable-horizontal">
        <table class="am-table am-table-bordered am-table-radius am-table-striped am-table-compact am-table-hover am-text-nowrap tablesorter">
            <thead>
                <tr>
                    <th>表名<i class="fa fa-sort"></i></th>								
                    <th>字段：值<i class="fa fa-sort"></i></th>									
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
			{{range .docs}}
 				<tr style='background:#d0d0d0 !important'>
					<td>{{$.col}}</td>
					<td>{{.}}</td>
					<td>新增 编辑 删除</td>
                </tr>
			{{end}}
            </tbody>
        </table>
    </div>
</div>

<script type="text/javascript">
    jQuery(function ($) {
        var table = $('.tablesorter').dataTable({
            "bPaginate": false, //翻页功能
            "bLengthChange": false, //改变每页显示数据数量
            "bFilter": false, //过滤功能
            "bSort": true, //排序功能
            "bInfo": false, //页脚信息
            "bAutoWidth": false, //自动宽度
            "bProcessing": false, //是否显示“正在处理”这个提示信息
            "aaSorting": [0, "desc"], //默认排序列
            "columnDefs": [
                {type: 'formatted-num', targets: '_all'}
            ]
        });
        var $floattable = $('.tablesorter');
        $floattable.floatThead();
        $('.am-scrollable-horizontal').on('scroll', function (e) {
            $floattable.floatThead('reflow');
        });
    });
</script>